<template>
  <div class="addressList">
    <div class="my-header">
      <i class="back"></i>
      <strong>我的地址</strong>
      <i class="myMsg"></i>
    </div>
    <div class="address-container" v-if="addressList!=''">
      <div class="address-item" v-for="(item,index) in addressList" :key="index">
        <p class="name">{{item.receiver}} {{item.phone}}</p>
        <p class="address"><span v-if="item.isDefault" class="deflult-select">[默认地址]</span>{{item.provinceName + item.cityName + item.areaName}}&nbsp;&nbsp;{{item.address}}</p>

        <i class="iconfont icon-bj" @click="$router.push({name:'address',query:{id:item.id}})"></i>
      </div>
    </div>
    <div class="addNewAddressbtn" @click="$router.push('/address')">新增收货地址</div>
  </div>
</template>

<script>
  import {
    getAddressList
  } from '@/api/shop'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        addressList: []
      }
    },
    watch: {},
    components: {

    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      fectchData() {
        const params = {
          userId: this.userInfo.id
        }
        // 获取地址列表
        getAddressList(params).then(res => {
          this.addressList = res.data.userAddressList
        }).catch(() => {})
      }
    },
    created() {
      this.fectchData()
    }
  }

</script>
<!-- addressList -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .addressList {
    .my-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      height: 1.25rem;
      background: #fff;
      padding: $padding;
      @include flexbox(space-between, center, row, nowrap);
      border-bottom: 1px solid #eee;
      .back {
        display: block;
        width: .65rem;
        height: .65rem;
      //  background: url('~assets/common/images/arrow-left.png') no-repeat;
        background-size: 100%;
      }
      strong {
        font-size: 18px;
        font-weight: normal;
        color: #333;
      }
      .bheedit {
        font-size: 12px;
      }
    }

    .addNewAddressbtn {
      position: fixed;
      width: 100%;
      text-align: center;
      bottom: 0;
      background: $orange;
      font-size: $title;
      color: #fff;
      height: 46px;
      line-height: 46px;
      text-align: center;
      z-index: 2000;
    }
    .address-container {
      // box-sizing: content-box;
      padding-top: 1.2rem;
      margin-bottom: 100px;
      .address-item {
        @include flexbox(space-between,
        flex-start,
        column,
        wrap);
        background: #fff;
        padding: 10px 40px 10px 10px;
        position: relative;
        border-bottom: 1px solid #eee;
        .icon-select-default,
        .icon-select {
          width: 20px;
          height: 20px;
          position: absolute;
          top: 50%;
          left: 10px;
          margin-top: -12px;
          font-size: 20px;
        }
        >p {
          width: 100%;
        }
        .name {
          font-size: $title;
          color: #333;
          padding-bottom: 0.2rem;
          @include textoverflow(1);
        }
        .address {
          .deflult-select {
            color: $orange;
          }
          font-size: $smsub;
          color: $gray;
          line-height: 1.3;
        }
        .icon-bj {
          width: 20px;
          height: 20px;
          position: absolute;
          top: 50%;
          right: 20px;
          margin-top: -13px;
          font-size: 26px;
          color: $gray;
        }
        
      }
    }
  }

</style>
